<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>选择收货地址</title>
	<!-- <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" /> -->
	<script src="https://www.topbmsd.com/mui/js/mui.min.js"></script>
	<link href="https://www.topbmsd.com/mui/css/mui.min.css" rel="stylesheet" />
	<script type="text/javascript" charset="utf-8">
		mui.init();
	</script>
</head>

<body>
	<div class="" id="app" v-cloak="">
		<div class="parnet">
			<div class="info" style="display:none">
				<p id='result'></p>
			</div>

			<div class="inputp">
				<input id="tipinput" class="mui-input-clear" placeholder="可输入搜索地址" />
			</div>
			<div>
				<div id='container'></div>

				<img class="cover_marker" src="https://www.topbmsd.com/images/position.png" />
			</div>
			<div id="panel"></div>

			<div class="main_bottom" ref="mapBottom">
				<div class="choose_address">
					<!-- 搜索出来的地址 -->
					<text id="address" class="add_text">地址</text>
					<text id="detailed_address" class="add_text">地址</text>
					<text id="province_name" class="add_text">地址</text>
					<text id="city_name" class="add_text">地址</text>
					<text id="area_name" class="add_text">地址</text>
					<!-- {{detailed_address}} -->
				</div>
				<button type="button" class="mui-btn mui-btn-warning " @click="addAddress()" style="position: fixed;
				bottom: 0;">选择这里</button>

			</div>
		</div>

		<!-- <script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: code,
			}
		</script>
		<script type="text/javascript"
			:src="key">
			</script> -->
	</div>
</body>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var dialog = new auiDialog();
	var vm = new Vue({
		el: "#app",
		data: {
			address: '',
			detailed_address: '',
			province_name: '',
			city_name: '',
			area_name: '',
			key: ''
		},
		methods: {
			addAddress: function () {
				var a = document.getElementById('address');
				vm.address = $api.text(a); // => text

				var b = document.getElementById('detailed_address');
				vm.detailed_address = $api.text(b); // => text

				var p = document.getElementById('province_name');
				vm.province_name = $api.text(p); // => text

				var c = document.getElementById('city_name');
				vm.city_name = $api.text(c); // => text

				var q = document.getElementById('area_name');
				vm.area_name = $api.text(q); // => text

				dialog.alert({
					title: "选择地址",
					msg: vm.detailed_address,
					buttons: ['取消', '确定']
				}, function (ret) {
					if (ret) {
						if (ret.buttonIndex == '2') {
							send_event('address_select', { address: vm.address, detailed_address: vm.detailed_address, province_name: vm.province_name, city_name: vm.city_name, area_name: vm.area_name })
							delay_close()
						}
					}
				})
			},

		}
	})
	apiready = function () {

		get_data('api/Address/getKey', {
		}, function (ret) {
			toast(ret.msg)
			if (ret.status) {
				vm.key = ret.data.key
				vm.code = ret.data.code
				// console.log(JSON.stringify(ret.data))

				 

				// document.getElementById('appCode').append("<script>"+vm.code+"<\/script>");

			    // var head= document.getElementById('appkey'); 
				// var script= document.createElement('script'); 
				// script.type= 'text/javascript'; 
				// script.src= vm.key; 
				// head.appendChild(script);
				
			}
		})
	};

</script>
<style>
	#container {
		width: 100%;
		height: 250px;
	}

	.parnet {
		flex: 1;
	}

	/* 中心点 */
	.cover_marker {
		position: absolute;
		width: 30px;
		height: 25px;
		top: 168px;
		left: 46%;
	}

	#tipinput {
		width: 100%;
		padding: 5px;
	}

	.inputp {
		padding: 5px;
		background-color: #005A93;
		height: 45px;
	}

	.info {
		width: 100%;
	}

	/* 底部下单 */
	.main_bottom {
		bottom: 0px;
		left: 0px;
		right: 0px;
		background-color: #FFFFFF;
		height: 100px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.choose_address {
		margin: 5px 10px 5px 10px;
		border-style: solid;
		border-width: 1px;
		border-color: #F98F34;
		border-radius: 5px;
		/* background-color: #F98F34; */
	}

	.add_text {
		padding: 10px;
		height: 30px;
		font-size: 14px;
		line-height: 25px;
	}

	.mui-btn {
		width: 50%;
		margin: 5px;
	}

	#panel {
		background-color: white;
		overflow-y: auto;
		top: 10px;
		right: 10px;
		width: 100%;
		flex: 1;
		border-bottom: solid 1px silver;
	}
</style>
<!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
<script type="text/javascript">
	window._AMapSecurityConfig = {
		securityJsCode: '862b36a35c7fbb0d111ac7fdc0ea5190',
	}
</script>
<script type="text/javascript"
	src="https://webapi.amap.com/maps?v=2.0&key=cc52513ba315c325231ce9b5ba051b2b&plugin=AMap.Geocoder,AMap.AutoComplete,AMap.PlaceSearch,AMap.Geolocation,AMap.Scale">
	</script>
<script type="text/javascript">
	var selectTitle;
	var selectAddress;
	// 获取地图中心点
	//var currentCenter = map.getCenter();   dragend
	var map = new AMap.Map('container', {
		viewMode: '2D',
		resizeEnable: true,
		zoom: 20

	});
	var scale = new AMap.Scale();
	//定位

	var geolocation = new AMap.Geolocation({
		enableHighAccuracy: true, //是否使用高精度定位，默认:true
		timeout: 10000, //超过10秒后停止定位，默认：5s
		position: 'RB', //定位按钮的停靠位置
		offset: new AMap.Pixel(10, 0), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
		zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
		needAddress: true // 定位后 显示定位点的地址 方便获取到城市信息
		//extensions :'all'

	});
	map.addControl(geolocation);
	map.addControl(scale);
	geolocation.getCurrentPosition(function (status, result) {
		if (status == 'complete') {
			onComplete(result)
		} else {
			onError(result)
		}
	});


	var city;
	var cityStr;
	var adCode;
	//解析定位结果
	function onComplete(data) {
		console.log(JSON.stringify(data))
		city = data.addressComponent.citycode
		adCode = data.addressComponent.adcode
		console.log("addressComponent = " + data.addressComponent.city)
		console.log("adcode = " + data.addressComponent.adcode)
		cityStr = data.addressComponent.city;
		console.log("citycode = " + city)
		console.log(data.position.lat + "-- " + data.position.lng);
		var str = [];
		str.push('定位结果：' + data.position);
		str.push('城市：' + data.addressComponent.city);
		str.push('pois：' + data.pois);
		str.push('定位类别：' + data.location_type);
		if (data.accuracy) {
			str.push('精度：' + data.accuracy + ' 米');
		} //如为IP精确定位结果则没有精度信息
		str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
		// document.getElementById('result').innerHTML = str /* .join('<br>') */ ;
		// document.getElementById('tipinput').value = cityStr;
		console.log(str);
		console.log(JSON.stringify(data));
		searchPoi([data.position.lng, data.position.lat])
		searchPoint([data.position.lng, data.position.lat])
	}
	//解析定位错误信息
	function onError(data) {
		console.log(data.message)
		document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
	}
	// -----------------定位完成

	var placeSearch = new AMap.PlaceSearch({
		type: '', // 兴趣点类别
		pageSize: 30, // 单页显示结果条数
		pageIndex: 1, // 页码
		city: city, // 兴趣点城市
		citylimit: true, //是否强制限制在设置的城市内搜索
		map: map, // 展现结果的地图实例
		panel: "panel", // 结果列表将在此容器中进行展示。
		autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
	});

	// 输入提示
	var autoOptions = {
		city: adCode,
		input: "tipinput",
		citylimit: true
	};

	var auto = new AMap.AutoComplete(autoOptions);
	auto.on("select", select); //注册监听，当选中某条记录时会触发
	auto.setCity(adCode)

	function select(e) {
		placeSearch.setCity(e.poi.adcode);
		//placeSearch.search(e.poi.name); //关键字查询查询
		map.setCenter(e.poi.location);
		searchPoi(e.poi.location, e.poi.name)
		console.log(JSON.stringify(e));
		document.getElementById('address').innerHTML = e.poi.district;
		document.getElementById('detailed_address').innerHTML = e.poi.address + e.poi.name;
	}

	var geocoder = new AMap.Geocoder({
		city: city, //城市设为北京，默认：“全国”		        
	});

	// 地图移动时间 获取到中心点坐标
	map.on('touchend', function (ev) {
		// 触发事件的对象
		var target = ev.target;
		// 触发事件的地理坐标，AMap.LngLat 类型
		// var lnglat = ev.lnglat;
		// // 触发事件的像素坐标，AMap.Pixel 类型
		// var pixel = ev.pixel;
		// 触发事件类型
		var type = ev.type;
		console.log(type);
		var currentCenter = map.getCenter();
		console.log("touchend  = " + currentCenter.lng + "-- lat = " + currentCenter.lat);
		//map.panTo([currentCenter.lng, currentCenter.lat]);
		var cpoint = [currentCenter.lng, currentCenter.lat]; //中心点坐标
		// placeSearch.searchNearBy('', cpoint, 200, function(status, result) {

		// });
		// 经纬度 -> 地址
		searchPoint(cpoint)
		searchPoi(cpoint)
	});

	// map.on('com', function(ev) {
	// 	// 触发事件的对象
	// 	var target = ev.target;
	// 	// 触发事件的地理坐标，AMap.LngLat 类型
	// 	// var lnglat = ev.lnglat;
	// 	// // 触发事件的像素坐标，AMap.Pixel 类型
	// 	// var pixel = ev.pixel;
	// 	// 触发事件类型
	// 	var type = ev.type;
	// 	console.log(type);
	// 	var currentCenter = map.getCenter();
	// 	console.log(currentCenter.lng + "-- lat = " + currentCenter.lat);
	// 	//map.panTo([currentCenter.lng, currentCenter.lat]);
	// 	var cpoint = [currentCenter.lng, currentCenter.lat]; //中心点坐标
	// 	// placeSearch.searchNearBy('', cpoint, 200, function(status, result) {

	// 	// });
	// 	searchPoi(cpoint)
	// });
	function searchPoint(point) {
		geocoder.getAddress(point, function (status, result) {
			if (status === 'complete' && result.regeocode) {
				var address = result.regeocode.formattedAddress;
				console.log(JSON.stringify(result));
				// console.log(
				// result.regeocode.addressComponent.province+
				// result.regeocode.addressComponent.city+
				// result.regeocode.addressComponent.district+
				// result.regeocode.addressComponent.township+
				// result.regeocode.addressComponent.street+
				// result.regeocode.addressComponent.streetNumber;
				// )
				console.log(result.regeocode.formattedAddress)
				selectDetail = result.regeocode.formattedAddress
				selectTitle = result.regeocode.addressComponent.province +
					result.regeocode.addressComponent.city +
					result.regeocode.addressComponent.district;
				selectAddress = result.regeocode.addressComponent.province +
					result.regeocode.addressComponent.city +
					result.regeocode.addressComponent.district +
					result.regeocode.addressComponent.township +
					result.regeocode.addressComponent.street +
					result.regeocode.addressComponent.streetNumber;
				document.getElementById('address').innerHTML = selectTitle;
				document.getElementById('detailed_address').innerHTML = selectDetail;
				document.getElementById('province_name').innerHTML = result.regeocode.addressComponent.province;
				document.getElementById('city_name').innerHTML = result.regeocode.addressComponent.city;
				document.getElementById('area_name').innerHTML = result.regeocode.addressComponent.district;
				document.getElementById('tipinput').innerHTML = '';
			} else {

			}
		});
	}

	function searchPoi(point) {
		placeSearch.searchNearBy('', point, 200, function (status, result) {

		});
	}


	function searchPoi(point, keyStr) {
		placeSearch.searchNearBy(keyStr, point, 200, function (status, result) {

		});
	}


	placeSearch.on('markerClick', function (ev) {
		var type = ev.type;
		console.log("markerClick");
		console.log(ev);
	});

	//地址列表选中item
	placeSearch.on('selectChanged', function (ev) {
		var type = ev.type;
		//console.log(type);
		console.log(ev.selected.data);
		// console.log(ev.selected.data.name);

		// console.log(ev.selected.data.cityname + ev.selected.data.adname +
		// 	ev.selected.data.address);
		console.log(ev.selected.data.location.lat);
		selectTitle = ev.selected.data.name;
		selectAddress = ev.selected.data.cityname + ev.selected.data.adname +
			ev.selected.data.address + ev.selected.data.name;
		console.log("selectTitle = " + selectTitle);
		console.log("selectAddress = " + selectAddress);
		document.getElementById('detailed_address').innerHTML = selectAddress;
	});
</script>

</html>